<template>
	<view class="main">
		<view class="swiper-box">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in imgList" :key="item" class="s-item" @click="clickSwiperItemSkip(item)">
					<image :src="BASE_URL + item.noticeContent" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<view class="item">
				<view class="title-box">
					<view class="t-l">
						<Title titleText="今日推荐" />
					</view>
					<view class="t-r" @click="$goURl(`/pages/index/more?type=${1}&title=今日推荐`)">
						<view class="txt">更多</view>
						<image src="/static/right.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<Empty v-if="!tjList.length" />
					<view v-else class="card" v-for="item in tjList" :key="item.yhjId">
						<Card :item="item" :type="1" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title-box">
					<view class="t-l">
						<Title titleText="悦达优选" />
					</view>
					<view class="t-r" @click="$goURl(`/pages/index/more?type=${2}&title=悦达优选`)">
						<view class="txt">更多</view>
						<image src="/static/right.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<Empty v-if="!yxList.length" />
					<view v-else class="card" v-for="item in yxList" :key="item.yhjId">
						<Card :item="item" :type="1" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title-box">
					<view class="t-l">
						<Title titleText="品牌推荐" />
					</view>
					<view class="t-r" @click="$goURl(`/pages/index/more?type=${3}&title=品牌推荐`)">
						<view class="txt">更多</view>
						<image src="/static/right.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<Empty v-if="!ppList.length" />
					<view v-else class="card" v-for="item in ppList" :key="item.yhjId">
						<Card :item="item" :type="1" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import Title from '@/components/title/titleCom.vue';
import Card from '@/components/card.vue';
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCouponList, getNoticeList } from '@/api/apiList.js';
import { BASE_URL } from '@/config/base.js';

// 获取公告列表
let imgList = ref([]);
const getNoticeListData = async (type) => {
	const res = await getNoticeList({ pageSize: 999, pageNum: 1 });
	if (res.code == 200) {
		imgList.value = res.rows;
		// res.rows.forEach((item) => {
		// 	imgList.value.push(BASE_URL + item.noticeContent);
		// });
	}
};

// 请求优惠券列表
const getCouponListData = async (type) => {
	return new Promise(async (reslove, reject) => {
		const res = await getCouponList({ yhjType: type, pageSize: 3 });
		if (res.code == 200) reslove(res.data.list);
		else reject(res.msg);
	});
};

const tjList = ref([]);
const getTjList = async () => {
	const res = await getCouponListData(1);
	tjList.value = res;
};

const yxList = ref([]);
const getYxList = async () => {
	const res = await getCouponListData(2);
	yxList.value = res;
};

const ppList = ref([]);
const getPpList = async () => {
	const res = await getCouponListData(3);
	ppList.value = res;
};

const init = () => {
	getNoticeListData();
	getTjList();
	getYxList();
	getPpList();
};
init();

const clickSwiperItemSkip = (item) => {
	if (item.remark) {
		uni.navigateTo({
			url: `/pages/index/couponDetail?id=${item.remark.split(',')[0]}&type=1`
		});
	}
	// uni.navigateTo({
	// 	url: `/pages/index/webView?url=${item.noticeTitle}`
	// });
};
// onLoad(() => {
// 	init();
// });
</script>
<style lang="scss" scoped>
.main {
	padding: 30rpx;
	.swiper {
		height: 300rpx;
		.s-item {
			height: 300rpx;
		}
		image {
			width: 690rpx;
			height: 300rpx;
			border-radius: 15rpx;
		}
	}
	.list {
		margin-top: 40rpx;
		.item {
			margin-bottom: 40rpx;
			.title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.t-r {
					display: flex;
					align-items: center;
					.txt {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						margin-right: 10rpx;
					}
					image {
						width: 10rpx;
						height: 16rpx;
					}
				}
			}
		}
	}
}
</style>
